import * as THREE from "three";
// import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
// import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
// import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

export default class ThreeJs {
  dom:HTMLElement|null =null;
  domStyle:CSSStyleDeclaration | null = null;
  scene: THREE.Scene | null = null;
  camera: THREE.PerspectiveCamera | null = null;
  renderer: THREE.WebGLRenderer | null = null;
  ambientLight: THREE.AmbientLight | null = null;
  mesh: THREE.Mesh | null = null;

  constructor(dom:HTMLElement|null) {
    if(dom){
      this.dom = dom
      this.domStyle = window.getComputedStyle(this.dom)
    }
    this.init();
  }

  init(): void {
    // 第一步新建一个场景
    this.scene = new THREE.Scene();//=======================场景
    this.scene.background =new THREE.Color(0x88ddff);
    this.setCamera();
    this.setRenderer();
    this.setLight();
    this.setCube();
    this.animate();
  }
  // 新建透视相机
  setCamera(): void {
    // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
    this.camera = new THREE.PerspectiveCamera(
      75,
      parseInt(this.domStyle!.width) / parseInt(this.domStyle!.height),
      0.1,
      1000
    );
    this.camera.position.z = 5;//===========================相机
  }

  // 设置渲染器
  setRenderer(): void {
    this.renderer = new THREE.WebGLRenderer();//==========================渲染器
    // 设置画布的大小
    this.renderer.setSize(parseInt(this.domStyle!.width), parseInt(this.domStyle!.height));
    //这里 其实就是canvas 画布  renderer.domElement
    this.dom?.appendChild(this.renderer.domElement);
  }
  // 更新渲染器
  resetRenderer(): void{
    if(this.camera&&this.renderer){
      this.renderer.setSize( parseInt(this.domStyle!.width), parseInt(this.domStyle!.height) );
      this.camera.aspect =  parseInt(this.domStyle!.width) / parseInt(this.domStyle!.height);
      this.camera.updateProjectionMatrix()
    }
  }

  // 设置环境光
  setLight(): void {
    if (this.scene) {
      this.ambientLight = new THREE.AmbientLight(0xffffff); // =============================环境光
      this.scene.add(this.ambientLight);
    }
  }

  // 创建网格模型(物体)
  setCube(src:string='/src/assets/cover.png'): void {
    if (this.scene) {
      const geometry = new THREE.BoxGeometry(); //创建一个立方体几何对象Geometry=================（形状）
      // const material = new THREE.MeshBasicMaterial({ color: 0xff3200 }); //材质对象Material
      const texture = new THREE.TextureLoader().load(
        src
      ); //首先，获取到纹理
      const material = new THREE.MeshBasicMaterial({ map: texture }); //然后创建一个phong材质来处理着色，并传递给纹理映射====================（材质）
      this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh========================（物体）
      this.scene.add(this.mesh); //网格模型添加到场景中
      this.render();
    }
  }
  // 移除网络模型（物体）
  removeCube() {
    this.mesh&&this.scene?.remove(this.mesh)
  }
  // 执行渲染
  render(): void {
    if (this.renderer && this.scene && this.camera) {
      this.renderer.render(this.scene, this.camera);
    }
  }

  // 动画
  animate(): void {
    if (this.mesh) {
      requestAnimationFrame(this.animate.bind(this));
      // this.mesh.rotation.x += 0.01;
      // this.mesh.rotation.y += 0.01;
      this.mesh.rotateY(0.01)
      this.mesh.rotateX(0.01)
      this.render();
    }
  }
}
